<template>
	<div class="wrap">
		<el-date-picker
			style="width: 100%"
			v-model="dataValue"
			:type="item.type"
			value-format="yyyy-MM-dd"
			@change="onChange"
			:placeholder="item.placeholder || '选择日期'"
			:disabled="disabled"
		>
		</el-date-picker>
		<div class="tip" v-if="item.data.sign">
			{{ item.data.sign }}
		</div>
	</div>
</template>
<script type="text/javascript">
import PropsMixin from './mixins/props'
import ValueChangeMixin from './mixins/value-change'
export default {
	name: 'xh-date', // 新建 date
	components: {},
	mixins: [PropsMixin, ValueChangeMixin],
	computed: {},
	watch: {
		value(val) {
			this.dataValue = this.transValue(val)
		}
	},
	data() {
		return {
			dataValue: ''
		}
	},
	props: {},
	mounted() {
		this.dataValue = this.transValue(this.value)
	},
	methods: {
		transValue(value) {
			if (this.item.type === 'daterange') {
				return value.split(',')
			} else {
				return value
			}
		},
		onChange(date) {
			if (this.item.type === 'daterange') {
				this.valueChange(date.join(','))
			} else {
				this.valueChange(date)
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.wrap {
	position: relative;
	.tip {
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translateY(-50%);
		color: #666;
		pointer-events: none;
	}
}
</style>
